<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  		<script type="text/javascript" src="/static/wami/recorder.js"></script>
  		<script type="text/javascript" src="/static/wami/gui.js"></script>
		<script>
		    var recordButton, playButton;
		    var recordInterval, playInterval;
		
		    function setupRecorder() {
			Wami.setup("wami", function () {
			    checkSecurity();
			});
		    }
		
		    function checkSecurity() {
			var settings = Wami.getSettings();
			if (settings.microphone.granted) {
			    listen();
			    Wami.hide();
			    setupButtons();
			} else {
			    // Show any Flash settings panel you want using the string constants
			    // defined here:
			    // http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/system/SecurityPanel.html
			    Wami.showSettings("privacy", "Wami.show", "checkSecurity", "zoomError");
			}
		    }
		
		    function listen() {
			Wami.startListening();
			// Continually listening when the window is in focus allows us to
			// buffer a little audio before the users clicks, since sometimes
			// people talk too soon. Without "listening", the audio would record
			// exactly when startRecording() is called.
			window.onfocus = function () {
			    Wami.startListening();
			};
		
			// Note that the use of onfocus and onblur should probably be replaced
			// with a more robust solution (e.g. jQuery's $(window).focus(...)
			window.onblur = function () {
			    Wami.stopListening();
			};
		
		    }
		
		    function zoomError() {
			// The minimum size for the flash content is 214x137. Browser's zoomed out
			// too far won't show the panel.
			// We could play the game of re-embedding the Flash in a larger DIV here,
			// but instead we just warn the user:
			alert("Your browser may be zoomed too far out to show the Flash security settings panel.  Zoom in, and refresh.");
		    }
		
		    function setupButtons() {
			recordButton = new Wami.Button("recordDiv", Wami.Button.RECORD);
			recordButton.onstart = startRecording;
			recordButton.onstop = stopRecording;
			recordButton.setEnabled(true);
		
			playButton = new Wami.Button("playDiv", Wami.Button.PLAY);
			playButton.onstart = startPlaying;
			playButton.onstop = stopPlaying;
			playButton.setEnabled(false);
		    }
		
		    /**
		     * These methods are called on clicks from the GUI.
		     */
		
		    function startRecording() {
			recordButton.setActivity(0);
			playButton.setEnabled(false);
			Wami.startRecording("https://wami-recorder.appspot.com/", "onRecordStart", "onRecordFinish", "onError");
		    }
		
		    function stopRecording() {
			Wami.stopRecording();
			clearInterval(recordInterval);
			recordButton.setEnabled(true);
		    }
		
		    function startPlaying() {
			playButton.setActivity(0);
			recordButton.setEnabled(false);
			Wami.startPlaying("https://wami-recorder.appspot.com/", "onPlayStart", "onPlayFinish", "onError");
		    }
		
		    function stopPlaying() {
			Wami.stopPlaying();
		    }
		
		    /**
		     * Callbacks from the flash indicating certain events
		     */
		
		    function onError(e) {
			alert(e);
		    }
		
		    function onRecordStart() {
			recordInterval = setInterval(function () {
			    if (recordButton.isActive()) {
				var level = Wami.getRecordingActivity();
				recordButton.setActivity(level);
			    }
			}, 200);
		    }
		
		    function onRecordFinish() {
			playButton.setEnabled(true);
		    }
		
		    function onPlayStart() {
			playInterval = setInterval(function () {
			    if (playButton.isActive()) {
				var level = Wami.getPlayingActivity();
				playButton.setActivity(level);
			    }
			}, 200);
		    }
		
		    function onPlayFinish() {
			clearInterval(playInterval);
			recordButton.setEnabled(true);
			playButton.setEnabled(true);
		    }
	</script>
	</head>
	<body>
		Hello.
		<div style="position: absolute; left: 90px; width:214px">
			<div id="recordDiv" style="position: absolute; left: 50px; top: 25px"></div>
			<div id="playDiv" style="position: absolute; right: 50px; top: 25px"></div>
			<div id="wami"></div>
		</div>
		<noscript>WAMI requires Javascript</noscript>
	</body>
</html>